<template>
  <div class="article-list" :style="{ height: articleHeight }">
    <van-pull-refresh
      v-model="isRefreshLoading"
      @refresh="onRefresh"
      :success-text="successText"
      success-duration="1500"
      loading-text="玩命加载中"
      pulling-text="释放即可刷新"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="我是有底线的"
        @load="onLoad"
        :error.sync="error"
        error-text="网络突然开了小差，点击重新加载"
      >
        <article-item
          v-for="(item, index) in list"
          :key="index"
          :article="item"
        />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from "@/api/article.js";
import ArticleItem from "@/components/article-item";
export default {
  name: "ArticleList",
  components: {
    ArticleItem,
  },
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [],
      loading: false, //加载状态 为false才能继续加载
      finished: false, //是否加载完全 加载完就是true
      timestamp: Date.now(), // 请求下一页数据的时间戳
      error: false, //若列表数据加载失败，将 error 设置成 true 即可显示错误提示，用户点击错误提示后会重新触发 load 事件。
      isRefreshLoading: false, //刷新状态 为false才能继续刷新
      successText: "", //成功提示文本
      articleHeight: "79vh", //响应式文章窗口适配
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.articleHeight =
      window.screen.availHeight -
      document.querySelector(".page-nav-bar").offsetHeight -
      document.querySelector(".van-tabs__wrap").offsetHeight -
      document.querySelector(".layout-tabbar").offsetHeight +
      "px";
  },
  methods: {
    // 触底加载事件
    async onLoad() {
      try {
        //请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id, //请求的频道id
          timestamp: this.timestamp, //时间戳 相当于页码
        });
        //测试代码测试网络异常时的效果
        // if (Math.random() > 0.5) {
        //   a;
        // }
        //把请求结果数据放到list列表
        this.list.push(...data.data.results);
        //本次加载结束之后要把加载状态设置为false
        this.loading = false;
        // 数据全部加载完成
        //因为左后一页的pre_timestamp为null
        if (data.data.pre_timestamp) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp;
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true;
        }
      } catch (err) {
        //请求失败错误提示 加载状态变为false下次能再次加载
        this.loading = false;
        this.error = true;
      }
    },
    // 下拉刷新事件
    async onRefresh() {
      try {
        //请求最新数据
        const { data } = await getArticles({
          channel_id: this.channel.id,
          timestamp: Date.now(), //每次刷新要传最新的时间戳
        });
        //测试代码测试网络异常时的效果
        // if (Math.random() > 0.5) {
        //   a;
        // }
        //追加到列表前面
        this.list.unshift(...data.data.results);
        // 关闭刷新状态
        this.isRefreshLoading = false;
        // 更新成功提示文本
        this.successText = `刷新成功，更新了${data.data.results.length}条数据`;
      } catch (err) {
        // 关闭刷新状态
        this.isRefreshLoading = false;
        this.$toast("刷新失败");
      }
    },
  },
};
</script>

<style scoped lang="less">
// 给每个列表设置独自的滚动区域,而现在滚动区域是公共的body
.article-list {
  // height: 79vh;
  overflow-y: auto;
}
</style>
